---
id: summary
title: Summary
sidebar_label: Summary
description: Summary animation
keywords:
  - summary
  - carousel animation
  - carousel animation summary
  - react-native-reanimated-carousel
  - reanimated-carousel
  - reanimated carousel
  - react-native
  - snap-carousel
  - react native
  - snap carousel
  - ios
  - android
  - carousel
  - snap
  - reanimated
image:
slug: /examples/summary
---

{/* 

=========================================================================
=========================================================================
This page generated by /scripts/gen-pages.mjs, Don't update it manually 
=========================================================================
=========================================================================

*/}

import { Cards } from 'nextra/components'
import Link from 'next/link'
import posthog from "posthog-js";


### Basic Layouts

<Cards num={2}>
  
        <Link href="/Examples/basic-layouts/stack" onClick={() => posthog.capture('example-clicked', { name: 'stack', kind: 'basic-layouts' })}>
          <div className='summary-item'>
            <div className='image-container'>![basic-layouts-stack](../../../app/app/demos/basic-layouts/stack/preview.png)</div>
            <div className='label-container'>
              Stack
            </div>
          </div>
        </Link>
  

        <Link href="/Examples/basic-layouts/parallax" onClick={() => posthog.capture('example-clicked', { name: 'parallax', kind: 'basic-layouts' })}>
          <div className='summary-item'>
            <div className='image-container'>![basic-layouts-parallax](../../../app/app/demos/basic-layouts/parallax/preview.png)</div>
            <div className='label-container'>
              Parallax
            </div>
          </div>
        </Link>
  

        <Link href="/Examples/basic-layouts/normal" onClick={() => posthog.capture('example-clicked', { name: 'normal', kind: 'basic-layouts' })}>
          <div className='summary-item'>
            <div className='image-container'>![basic-layouts-normal](../../../app/app/demos/basic-layouts/normal/preview.png)</div>
            <div className='label-container'>
              Normal
            </div>
          </div>
        </Link>
  

        <Link href="/Examples/basic-layouts/left-align" onClick={() => posthog.capture('example-clicked', { name: 'left-align', kind: 'basic-layouts' })}>
          <div className='summary-item'>
            <div className='image-container'>![basic-layouts-left-align](../../../app/app/demos/basic-layouts/left-align/preview.png)</div>
            <div className='label-container'>
              Left Align
            </div>
          </div>
        </Link>
  
</Cards>
  
### Utils

<Cards num={2}>
  
        <Link href="/Examples/utils/pagination" onClick={() => posthog.capture('example-clicked', { name: 'pagination', kind: 'utils' })}>
          <div className='summary-item'>
            <div className='image-container'>![utils-pagination](../../../app/app/demos/utils/pagination/preview.png)</div>
            <div className='label-container'>
              Pagination
            </div>
          </div>
        </Link>
  
</Cards>
  
### Custom Animations

<Cards num={2}>
  
        <Link href="/Examples/custom-animations/tinder" onClick={() => posthog.capture('example-clicked', { name: 'tinder', kind: 'custom-animations' })}>
          <div className='summary-item'>
            <div className='image-container'>![custom-animations-tinder](../../../app/app/demos/custom-animations/tinder/preview.png)</div>
            <div className='label-container'>
              Tinder
            </div>
          </div>
        </Link>
  

        <Link href="/Examples/custom-animations/scale-fade-in-out" onClick={() => posthog.capture('example-clicked', { name: 'scale-fade-in-out', kind: 'custom-animations' })}>
          <div className='summary-item'>
            <div className='image-container'>![custom-animations-scale-fade-in-out](../../../app/app/demos/custom-animations/scale-fade-in-out/preview.png)</div>
            <div className='label-container'>
              Scale Fade In Out
            </div>
          </div>
        </Link>
  

        <Link href="/Examples/custom-animations/rotate-in-out" onClick={() => posthog.capture('example-clicked', { name: 'rotate-in-out', kind: 'custom-animations' })}>
          <div className='summary-item'>
            <div className='image-container'>![custom-animations-rotate-in-out](../../../app/app/demos/custom-animations/rotate-in-out/preview.png)</div>
            <div className='label-container'>
              Rotate In Out
            </div>
          </div>
        </Link>
  

        <Link href="/Examples/custom-animations/rotate-fade-in-out" onClick={() => posthog.capture('example-clicked', { name: 'rotate-fade-in-out', kind: 'custom-animations' })}>
          <div className='summary-item'>
            <div className='image-container'>![custom-animations-rotate-fade-in-out](../../../app/app/demos/custom-animations/rotate-fade-in-out/preview.png)</div>
            <div className='label-container'>
              Rotate Fade In Out
            </div>
          </div>
        </Link>
  

        <Link href="/Examples/custom-animations/quick-swipe" onClick={() => posthog.capture('example-clicked', { name: 'quick-swipe', kind: 'custom-animations' })}>
          <div className='summary-item'>
            <div className='image-container'>![custom-animations-quick-swipe](../../../app/app/demos/custom-animations/quick-swipe/preview.png)</div>
            <div className='label-container'>
              Quick Swipe
            </div>
          </div>
        </Link>
  

        <Link href="/Examples/custom-animations/press-swipe" onClick={() => posthog.capture('example-clicked', { name: 'press-swipe', kind: 'custom-animations' })}>
          <div className='summary-item'>
            <div className='image-container'>![custom-animations-press-swipe](../../../app/app/demos/custom-animations/press-swipe/preview.png)</div>
            <div className='label-container'>
              Press Swipe
            </div>
          </div>
        </Link>
  

        <Link href="/Examples/custom-animations/multiple" onClick={() => posthog.capture('example-clicked', { name: 'multiple', kind: 'custom-animations' })}>
          <div className='summary-item'>
            <div className='image-container'>![custom-animations-multiple](../../../app/app/demos/custom-animations/multiple/preview.png)</div>
            <div className='label-container'>
              Multiple
            </div>
          </div>
        </Link>
  

        <Link href="/Examples/custom-animations/fold" onClick={() => posthog.capture('example-clicked', { name: 'fold', kind: 'custom-animations' })}>
          <div className='summary-item'>
            <div className='image-container'>![custom-animations-fold](../../../app/app/demos/custom-animations/fold/preview.png)</div>
            <div className='label-container'>
              Fold
            </div>
          </div>
        </Link>
  

        <Link href="/Examples/custom-animations/flow" onClick={() => posthog.capture('example-clicked', { name: 'flow', kind: 'custom-animations' })}>
          <div className='summary-item'>
            <div className='image-container'>![custom-animations-flow](../../../app/app/demos/custom-animations/flow/preview.png)</div>
            <div className='label-container'>
              Flow
            </div>
          </div>
        </Link>
  

        <Link href="/Examples/custom-animations/curve" onClick={() => posthog.capture('example-clicked', { name: 'curve', kind: 'custom-animations' })}>
          <div className='summary-item'>
            <div className='image-container'>![custom-animations-curve](../../../app/app/demos/custom-animations/curve/preview.png)</div>
            <div className='label-container'>
              Curve
            </div>
          </div>
        </Link>
  

        <Link href="/Examples/custom-animations/cube-3d" onClick={() => posthog.capture('example-clicked', { name: 'cube-3d', kind: 'custom-animations' })}>
          <div className='summary-item'>
            <div className='image-container'>![custom-animations-cube-3d](../../../app/app/demos/custom-animations/cube-3d/preview.png)</div>
            <div className='label-container'>
              Cube 3d
            </div>
          </div>
        </Link>
  

        <Link href="/Examples/custom-animations/circular" onClick={() => posthog.capture('example-clicked', { name: 'circular', kind: 'custom-animations' })}>
          <div className='summary-item'>
            <div className='image-container'>![custom-animations-circular](../../../app/app/demos/custom-animations/circular/preview.png)</div>
            <div className='label-container'>
              Circular
            </div>
          </div>
        </Link>
  

        <Link href="/Examples/custom-animations/blur-rotate" onClick={() => posthog.capture('example-clicked', { name: 'blur-rotate', kind: 'custom-animations' })}>
          <div className='summary-item'>
            <div className='image-container'>![custom-animations-blur-rotate](../../../app/app/demos/custom-animations/blur-rotate/preview.png)</div>
            <div className='label-container'>
              Blur Rotate
            </div>
          </div>
        </Link>
  

        <Link href="/Examples/custom-animations/blur-parallax" onClick={() => posthog.capture('example-clicked', { name: 'blur-parallax', kind: 'custom-animations' })}>
          <div className='summary-item'>
            <div className='image-container'>![custom-animations-blur-parallax](../../../app/app/demos/custom-animations/blur-parallax/preview.png)</div>
            <div className='label-container'>
              Blur Parallax
            </div>
          </div>
        </Link>
  

        <Link href="/Examples/custom-animations/anim-tab-bar" onClick={() => posthog.capture('example-clicked', { name: 'anim-tab-bar', kind: 'custom-animations' })}>
          <div className='summary-item'>
            <div className='image-container'>![custom-animations-anim-tab-bar](../../../app/app/demos/custom-animations/anim-tab-bar/preview.png)</div>
            <div className='label-container'>
              Anim Tab Bar
            </div>
          </div>
        </Link>
  

        <Link href="/Examples/custom-animations/advanced-parallax" onClick={() => posthog.capture('example-clicked', { name: 'advanced-parallax', kind: 'custom-animations' })}>
          <div className='summary-item'>
            <div className='image-container'>![custom-animations-advanced-parallax](../../../app/app/demos/custom-animations/advanced-parallax/preview.png)</div>
            <div className='label-container'>
              Advanced Parallax
            </div>
          </div>
        </Link>
  
</Cards>